<template>
    <div>
        <div>
            <el-button @click.prevent="changeTheme(ThemeKey.NEWSIMULATION)">newSimulation</el-button>
            <el-button @click.prevent="changeTheme(ThemeKey.PRIMARY)">primary</el-button>
        </div>
        <div class="test-contaniner"></div>
    </div>
</template>

<script lang="ts" setup>
import { ThemeKey, useTheme } from './hooks/useTheme';

const { toggleTheme } = useTheme()
const changeTheme = (type: ThemeKey) => {
    toggleTheme(type)
}
</script>

<style lang="scss">
.test-contaniner {
	width: 120px;
	height: 120px;
    margin-top: 60px;
	
	@include themeify {
		background-color: themed('bg-color');
	}
}
</style>